<template>
  <div class="grid">
    <h1>喵了个喵</h1>
    <div style="font-size: 23px; color: blueviolet;">
      游戏计时:
      <div style="display: inline-block;" v-if="!showTimer">00:00</div>
      <div v-if="showTimer" class="timer">{{ formattedTime }}</div>
    </div>
    <div style="font-size: 23px; color: blueviolet;">剩余: {{rangeCount}}</div>
    <div style="font-size: 23px; color: blueviolet;">得分: {{ score }}</div>
    <el-select v-model="imageCount" placeholder="请选择布局">
      <el-option
        v-for="item in options"
        :key="item.imageCount"
        :label="item.label"
        :value="item.imageCount"
      ></el-option>
    </el-select>
    <div class="box">
      <div v-for="(row, rowIndex) in rows" :key="rowIndex" class="row">
        <div v-for="(image, index) in row" :key="index" class="image">
          <img
            :src="image.src"
            :alt="image.name"
            width="50px"
            height="50px"
            @click="toggleImageVisibility(image)"
            :class="{ 'hidden': !image.visible }"
          />
        </div>
      </div>
    </div>
    <div class="xia">
      <div v-for="(selectedImage, index) in selectedImages" :key="index" id="b">
        <img
          :src="selectedImage.src"
          :alt="selectedImage.name"
          width="50px"
          height="50px"
          @click="showImageName(selectedImage.name)"
        />
      </div>
    </div>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, src: require('../assets/img/1.png'), name: '图片1', visible: true },
        { id: 2, src: require('../assets/img/2.png'), name: '图片2', visible: true },
        { id: 3, src: require('../assets/img/3.png'), name: '图片3', visible: true },
        { id: 4, src: require('../assets/img/4.png'), name: '图片4', visible: true },
        { id: 5, src: require('../assets/img/5.png'), name: '图片5', visible: true },
        { id: 6, src: require('../assets/img/6.png'), name: '图片6', visible: true },
        { id: 7, src: require('../assets/img/7.png'), name: '图片7', visible: true },
        { id: 8, src: require('../assets/img/8.png'), name: '图片8', visible: true },
        { id: 9, src: require('../assets/img/9.png'), name: '图片9', visible: true },
      ],
      options: [
        { imageCount: 1, label: '1x1' },
        { imageCount: 2, label: '2x2' },
        { imageCount: 3, label: '3x3' },
        { imageCount: 4, label: '4x4' },
        { imageCount: 5, label: '5x5' },
        { imageCount: 6, label: '6x6' },
        { imageCount: 7, label: '7x7' },
        { imageCount: 8, label: '8x8' },
        { imageCount: 9, label: '9x9' },
      ],
      imageCount: 9,
      selectedImages: [],
      showTimer: false,
      startTime: 0,
      endTime: 0,
      showPopup: false,
      timerInterval: null,
      elapsedTime: 0,
      score: 0, // 分数
      rangeCount: 0
    };
  },
  created(){
    this.RangeCount()
  },
  computed: {
    rows() {
      const rows = [];
      for (let i = 0; i < this.imageCount; i++) {
        const row = [];
        for (let j = 0; j < this.imageCount; j++) {
          row.push(this.randomImage());
        }
        rows.push(row);
      }
      return rows;
    },
    formattedTime() {
      const seconds = this.elapsedTime % 60;
      const minutes = Math.floor(this.elapsedTime / 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  methods: {
    randomImage() {
      const index = Math.floor(Math.random() * this.images.length);
      return { ...this.images[index] };
    },
    toggleImageVisibility(image) {
  if (!this.showTimer) {
    this.startTimer();
  }

  if (image.visible) {
    this.selectedImages.push(image);
    if (this.selectedImages.length >= 3) {
      const names = this.selectedImages.map((img) => img.name);
      const uniqueNames = [...new Set(names)];
      for (const name of uniqueNames) {
        const count = names.filter((n) => n === name).length;
        if (count >= 3) {
          this.selectedImages = this.selectedImages.filter((img) => img.name !== name);
          this.score += 10;
          this.rangeCount = this.rangeCount-3;
        }
      }
    }
  } else {
    const index = this.selectedImages.findIndex((selectedImage) => selectedImage.id === image.id);
    if (index !== -1) {
      this.selectedImages.splice(index, 1);
    }
  }
  image.visible = !image.visible;

  if (this.selectedImages.length === this.imageCount * this.imageCount) {
    this.stopTimer();
    this.showPopup = true;
  }
},

    showImageName(name) {
    },
    startTimer() {
      this.showTimer = true;
      this.startTime = new Date().getTime();
      this.timerInterval = setInterval(() => {
        const currentTime = new Date().getTime();
        this.elapsedTime = Math.floor((currentTime - this.startTime) / 1000);
      }, 1000);
    },
    stopTimer() {
      this.endTime = new Date().getTime();
      clearInterval(this.timerInterval);
    },
    //此方法用于每次计算box中的照片数量
    RangeCount(){
      this.rangeCount = this.imageCount * this.imageCount;
    }
  
  },
};
</script>

<style scoped>
.grid {
  width: 100%;
  margin: 0 auto;
  height: 1000px;
  border: 1px white solid;
  box-sizing: border-box;
  background-image: url('../assets/img/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  width: 560px;
  height: 600px;
  margin: 0 auto;
  border: 0px red solid;
  display: flex; /* 设置为flex布局 */
  align-items: center;
  flex-wrap: wrap; /* 设置flex-wrap属性 */
  flex-direction: column;
  justify-content: center; /* 将row元素在box中居中对齐 */
  text-align: center; /* 将box元素在只有一行时居中显示 */
}
.score {
  font-size: 20px;
  color: brown;
}
.row {
  border: 0px blue solid;
  width: 530px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* 将image元素在row中居中对齐 */
  align-items: center; /* 将image元素在row中垂直居中对齐 */
}
.image {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 将image元素在行内居中对齐 */
  align-items: center; /* 将image元素在行内垂直居中对齐 */
  width: 50px;
  height: 50px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
}
.xia {
  background-color: #923c45;
  margin: 0 auto;
  width: 448px;
  height: 70px;
  border-radius: 15px;
  margin-top: 20px;
  padding-left: 5px;
  padding-right: 5px;
}
#b {
  text-align: center;
  float: left;
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 70px;
}

.timer {
  display: inline-block;
  text-align: center;
  font-size: 20px;
}

.popup {
  text-align: center;
  margin-top: 20px;
}

.popup h2 {
  font-size: 24px;
}

.popup p {
  font-size: 18px;
}

.popup button {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 16px;
}
.hidden {
  visibility: hidden;
}
</style>
